<template>
  <div class="about-container">
    <el-card shadow="hover">
      <template #header>
        <div class="card-header">
          <span>关于我</span>
        </div>
      </template>

      <el-row :gutter="20">
        <!-- 左侧：头像和基本信息 -->
        <el-col :span="8">
          <div class="profile-avatar">
            <!-- 使用 userInfo.avatar，如果 userInfo.avatar 不存在则使用默认头像 -->
            <el-avatar :size="120" :src="userInfo.avatar || '/static/img/avatar.png'" />
            <!-- 显示 userInfo.username -->
            <h3 class="user-name">{{ userInfo.username || '用户名' }}</h3>
            <!-- 可以根据需要添加角色信息，如果 userInfo 中有的话 -->
            <p class="user-role">{{ userInfo.role || '系统管理员' }}</p>
          </div>
          <el-descriptions title="联系信息" :column="1" border class="contact-info">
            <el-descriptions-item label="邮箱">
              <el-icon><Message /></el-icon> {{ userInfo.email || '未提供' }}
            </el-descriptions-item>
            <el-descriptions-item label="电话">
              <el-icon><Iphone /></el-icon> {{ userInfo.phone || '未提供' }}
            </el-descriptions-item>
            <el-descriptions-item label="地址">
              <el-icon><Location /></el-icon> {{ userInfo.address || '未提供' }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>

        <!-- 右侧：简介和技能 -->
        <el-col :span="16">
          <el-card shadow="never">
             <template #header>
               <div class="card-header">
                 <span>个人简介</span>
               </div>
             </template>
             <!-- 可以从 userInfo 中获取简介信息 -->
             <p class="bio-text">
               {{ userInfo.bio || '暂无个人简介。' }}
             </p>
          </el-card>

          <el-card shadow="never" style="margin-top: 20px;">
             <template #header>
               <div class="card-header">
                 <span>技能掌握</span>
               </div>
             </template>
             <!-- 技能部分保持静态或根据需要从 userInfo 获取 -->
             <div class="skills-section">
                <div class="skill-item">
                    <span>Vue.js</span>
                    <el-progress :percentage="75" status="success" />
                </div>
                 <div class="skill-item">
                    <span>Element Plus</span>
                    <el-progress :percentage="80" />
                </div>
                 <div class="skill-item">
                    <span>Python (Flask)</span>
                    <el-progress :percentage="60" status="warning"/>
                </div>
                 <div class="skill-item">
                    <span>数据库 (MySQL/PostgreSQL)</span>
                    <el-progress :percentage="90" status="exception"/>
                </div>
                <div class="skill-tags">
                    <el-tag type="info" style="margin-right: 8px;">Git</el-tag>
                    <el-tag type="success" style="margin-right: 8px;">Docker</el-tag>
                    <el-tag style="margin-right: 8px;">Linux</el-tag>
                    <el-tag type="warning">API 设计</el-tag>
                </div>
             </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
// 导入需要的图标和 Vue 功能
import { Message, Iphone, Location } from '@element-plus/icons-vue';
import { ref, onMounted } from 'vue'; // 引入 ref 和 onMounted

// 定义一个 ref 来存储用户信息，并设置默认值
const userInfo = ref({
  username: '',
  avatar: '',
  role: '',
  email: '',
  phone: '',
  address: '',
  bio: ''
  // 可以根据 localStorage 中实际存储的字段添加更多属性
});

// 在组件挂载后执行
onMounted(() => {
  const storedUserInfo = localStorage.getItem('userInfo');
  if (storedUserInfo) {
    try {
      const parsedInfo = JSON.parse(storedUserInfo);
      // 合并 localStorage 数据到 userInfo ref，保留默认值（如果 localStorage 没有对应字段）
      userInfo.value = { ...userInfo.value, ...parsedInfo };
    } catch (error) {
      console.error("无法解析 localStorage 中的 userInfo:", error);
      // 可选：如果解析失败，可以清除无效数据
      // localStorage.removeItem('userInfo');
    }
  } else {
    console.warn("localStorage 中未找到 userInfo 数据。");
    // 可选：如果需要，可以在这里触发重新登录或提示
  }
});

// 如果需要从API获取数据，可以在这里定义相关逻辑
// import { ref, onMounted } from 'vue';
// import axios from 'axios';

// const userInfo = ref({});
// const skills = ref([]);

// onMounted(async () => {
//   try {
//     const res = await axios.get('/api/user/profile'); // 假设的API端点
//     userInfo.value = res.data.info;
//     skills.value = res.data.skills;
//   } catch (error) {
//     console.error("Failed to fetch profile data:", error);
//   }
// });

</script>

<style scoped>
.about-container {
  /* padding: 20px; */
  background-color: #f0f2f5; /* 与主内容区背景一致 */
}

.el-card {
  border-radius: 4px;
}

.card-header {
  font-weight: bold;
  font-size: 16px;
}

.profile-avatar {
  text-align: center;
  margin-bottom: 20px;
}

.user-name {
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 20px;
  font-weight: 500;
}

.user-role {
  font-size: 14px;
  color: #606266;
  margin-bottom: 20px;
}

.contact-info {
  margin-top: 20px;
}
/* 让描述列表的图标和文字对齐 */
:deep(.el-descriptions__label),
:deep(.el-descriptions__content) {
    display: inline-flex;
    align-items: center;
}
:deep(.el-descriptions__content .el-icon) {
    margin-right: 5px;
}


.bio-text {
  font-size: 14px;
  line-height: 1.8;
  color: #606266;
  text-indent: 2em; /* 首行缩进 */
}

.skills-section {
  padding-top: 10px;
}

.skill-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}
.skill-item span {
    width: 180px; /* 固定标签宽度 */
    margin-right: 15px;
    font-size: 14px;
    color: #606266;
    text-align: right;
}
.skill-item .el-progress {
    flex-grow: 1; /* 进度条占据剩余空间 */
}

.skill-tags {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #e4e7ed; /* 分隔线 */
}

</style>